<template>
  <div  :class="[treeHeight? 'qj-tree': 'qj_tree_height','basic-tree-height']">
    <div class="tree-search">
      <el-input
        v-if="show"
        placeholder="快速查找..."
        size="mini"
        v-model="filterText">
      </el-input>
    </div>
    <el-tree
      :data="treeData"
      :props="props"
      v-show="flagTree"
      @node-click="clickNodeChange"
      highlight-current>
    </el-tree>
    <el-tree
      highlight-current
      :props="defaultProps"
      :load="loadChildrenData"
      :default-expanded-keys="[1]"
      v-show="!flagTree"
      lazy
      @node-click="clickNodeChange"
      :filter-node-method="filterNode"
      :draggable="draggable"
      @node-drop="handleDrop"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      node-key="id"
      ref="qjtree">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <i class="iconfont" :class="node.expanded?'icon-wenjianjia':'icon-wenjianjia1'" style="color: #9fdfd9"></i>
        <span class="hover-node" style="margin-left:5px">{{node.label}}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'QjTree',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    treeData: Array | Object,
    loadChildrenData: Function,
    draggable: {
      type: Boolean,
      default: false
    },
    // 控制树的高度
    treeHeight: {
      type: Boolean,
      default: false
    },
    flagTree: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      filterText: '',
      defaultProps: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      idObj: {
        id: 0,
        fatherid: 0
      },
      props: {
        label: 'name'
      }
    }
  },
  methods: {
    /**
     * @author 王磊
     * @information 点击节点时发生的事件
     * @date 2019-1-19 18:30
     */
    clickNodeChange: function (data, node, self) {
      this.$emit('node-click', data, node, self)
    },
    /**
     * 节点过滤方法
     * @author 王磊
     * @date 2018-10-04 17:40
     */
    filterNode: function (value, data) {
      if (!value) {
        return true
      }
      return data.name.indexOf(value) !== -1
    },
    handleDrop (draggingNode, dropNode, dropType, ev) {
      this.idObj.fatherid = dropNode.data.id
      this.idObj.id = draggingNode.data.id
      this.$emit('save-drop-id', this.idObj)
    },
    allowDrop (draggingNode, dropNode, type) {
      if (type === 'inner') {
        return true
      } else {
        return false
      }
    },
    allowDrag (draggingNode) {
      return draggingNode.data.name.indexOf('唐山千家') === -1
    }
  },
  watch: {
    filterText: function (val) {
      this.$refs.qjtree.filter(val)
    }
  }
}
</script>
